


<!-- 
1. **Main元素宽度调整**：
   - 原始代码中 `main` 元素的宽度设置为 `80%`，这可能导致在某些屏幕宽度下，侧边栏和主体内容无法并排显示。
   - 修改后的代码将 `main` 元素的宽度设置为 `100%`，确保它能够适应不同屏幕宽度并包裹所有子元素。

2. **Flex-wrap属性应用**：
   - 原始代码中 `flex-wrap: wrap;` 属性应用于 `主体` 元素，这可能导致子元素在不适当的时机换行。
   - 修改后的代码将 `flex-wrap: wrap;` 属性应用于 `主体` 元素，以确保其内部的 `左` 和 `右` 元素可以在必要时换行。

3. **侧边栏布局调整**：
   - 原始代码中 `侧边栏` 的 `display` 属性设置为 `flex`，但没有指定 `flex-direction`，这可能导致列表项的排列不符合预期。
   - 修改后的代码将 `侧边栏` 的 `display` 属性设置为 `flex` 并指定 `flex-direction: column;`，确保列表项垂直排列。

4. **主体内容布局调整**：
   - 原始代码中 `主体` 元素的 `display` 属性设置为 `flex`，但没有指定 `flex-wrap` 属性，这可能导致子元素在不适当的时机换行。
   - 修改后的代码将 `主体` 元素的 `display` 属性设置为 `flex` 并添加 `flex-wrap: wrap;` 属性，以控制子元素的换行行为。

5. **左和右元素宽度调整**：
   - 原始代码中 `左` 和 `右` 元素的宽度设置为 `50%`，这可能导致它们在 `主体` 元素中无法正确并排显示。
   - 修改后的代码将 `左` 和 `右` 元素的宽度设置为 `48%`，以确保它们可以并排显示，并且留出足够的空间用于间隔。

6. **Main元素高度调整**：
   - 原始代码中 `main` 元素的高度设置为 `100vh`，这可能导致内容溢出或布局不当。
   - 修改后的代码将 `main` 元素的高度设置为 `auto`，以确保它根据内容自动调整高度。

通过这些修改，您的代码应该能够正确地布局并显示所有内容。如果您有任何进一步的问题或需要更多的帮助，请随时告知。
 -->




 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>作业</title>
     <style>
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
 
         body {
             display: flex;
             flex-direction: column;
             align-items: center;
             font-size: 14px;
             position: relative;
         }
 
         ul,
         ol,
         li {
             list-style: none;
         }
 
         a {
             color: #fff;
             text-decoration: none;
         }
 
 
         header {
             display: flex;
             color: #fff;
             width: 100%;
             height: 100px;
             justify-content: space-evenly;
             align-items: center;
             flex-direction: column;
             position: relative;
         }
 
         header .up {
             display: flex;
             width: 100%;
             justify-content: space-between;
         }
 
         header .up h1 {
             color: aquamarine;
         }
 
         header .up input {
             width: 400px;
             height: 40px;
             border-radius: 50px;
         }
 
         header .up button {
             color: #fff;
             background-color: aquamarine;
             border-radius: 20px;
             width: 60px;
             height: 30px;
         }
 
         header .up ul {
             display: flex;
             flex-direction: row;
             justify-content: space-between;
             align-items: flex-start;
         }
 
         header .up ul li {
             margin-left: 15px;
         }
 
         header a {
             color: #333;
         }
 
 
 
         header .down {
             display: flex;
             width: 100%;
         }
 
         header .down ul {
             display: flex;
 
         }
 
         header .down ul li {
             margin-left: 15px;
         }
 
 
 
         /* 内容 */
         main {
             display: flex;
             width: 100%;
             height: auto;
             justify-content: space-between;
             margin-top: 20px;
         }
 
         /* 侧边栏 */
         main .侧边栏 {
             display: flex;
             flex-direction: column;
             height: auto;
             width: 20%;
             align-items: center;
         }
 
         main .侧边栏 ul li {
             display: flex;
             width: 100px;
             height: 30px;
             margin-top: 10px;
             background-color: #f5f5f5;
             align-items: center;
             justify-content: center;
             border-radius: 10px;
         }
 
         main .侧边栏 ul li a {
             color: #333;
         }
 
         main .侧边栏 ul .首页 {
             background-image: url(/素材/img/3-19-作业2.jpg);
         }
 
         main .侧边栏 ul .首页 a {
             color: #f5f5f5;
         }
 
 
 
         .主体 {
             display: flex;
             flex-wrap: wrap;
             flex-grow: 1;
             justify-content: space-between;
         }
 
 
         /* 主体左 */
         .主体 .左,
         .主体 .右 {
             width: 48%;
             margin-top: 10px;
         }
 
         .主体 .左 ul li,
         .主体 .右 ul li {
             display: flex;
             width: 100%;
             height: 30px;
             border-bottom: 1px solid #f5f5f5;
             align-items: center;
         }
 
         .主体 .左 ul li a,
         .主体 .右 ul li a {
             color: #333;
         }
 
 
         /* 脚部 */
         footer {
             display: flex;
             width: 100%;
             height: 100%;
             position: relative;
             background-color: #f5f5f5;
         }
 
         footer .左 {
             width: 33%;
             margin: 20px;
         }
 
         footer .左 h1{
             color: aquamarine;
             margin-bottom: 10px;
 
         }
 
         footer .左 p{
             font-size: 12px;
         }
 
         footer .中 {
             width: 33%;
             margin: 20px;
         }
 
         footer .中 h3{
             color: aquamarine;
             margin-bottom: 10px;
 
         }
         footer .中 ul li{
             font-size: 12px;
         }
 
         footer .右 {
             width: 33%;
             margin: 20px;
         }
 
         footer .右 h3{
             color: aquamarine;
             margin-bottom: 10px;
 
         }
         footer .右 ul li{
             font-size: 12px;
         }
     </style>
 
 </head>
 
 <body>
     <header>
         <div class="up">
             <h1>360排行榜</h1>
 
             <div>
                 <input type="text" placeholder="国色天香">
                 <button><a href="#">全网搜</a></button>
             </div>
 
             <ul>
                 <li><a href="#">看过</a></li>
                 <li><a href="#">收藏</a></li>
                 <li><a href="#">登录</a></li>
             </ul>
         </div>
 
         <div class="down">
             <ul>
                 <li><a href="#">首页</a></li>
                 <li><a href="#">电视剧</a></li>
                 <li><a href="#">综艺</a></li>
                 <li><a href="#">电影</a></li>
                 <li><a href="#">儿童</a></li>
                 <li><a href="#">动漫</a></li>
                 <li><a href="#">经典</a></li>
                 <li><a href="#">小视频</a></li>
                 <li><a href="#">排行榜</a></li>
             </ul>
         </div>
 
     </header>
 
     <img class="背景" src="/素材/img/3-19-作业1.jpg" alt="">
 
     <main>
         <div class="侧边栏">
             <ul>
                 <li class="首页"><a href="#">首页</a></li>
                 <li><a href="#">总榜</a></li>
                 <li><a href="#">电视剧</a></li>
                 <li><a href="#">电影</a></li>
                 <li><a href="#">综艺</a></li>
                 <li><a href="#">动漫</a></li>
                 <li><a href="#">儿童</a></li>
             </ul>
         </div>
 
 
         <div class="主体">
             <div class="左">
                 <ul>
                     <li><a href="#">总榜</a></li>
                     <li><a href="#">1.哪吒之魔童降世</a></li>
                     <li><a href="#">2.北上</a></li>
                     <li><a href="#">3.速度与激情10</a></li>
                     <li><a href="#">4.猎屠</a></li>
                     <li><a href="#">5.开心锤锤</a></li>
                     <li><a href="#">6.连环套</a></li>
                     <li><a href="#">7.仁心俱乐部</a></li>
                     <li><a href="#">8.熊出没只探险日记</a></li>
                     <li><a href="#">9.小猪佩奇全集</a></li>
                     <li><a href="#">10.战狼</a></li>
                 </ul>
             </div>
 
             <div class="右">
                 <ul>
                     <li><a href="#">电视</a></li>
                     <li><a href="#">1.哪吒之魔童降世</a></li>
                     <li><a href="#">2.北上</a></li>
                     <li><a href="#">3.速度与激情10</a></li>
                     <li><a href="#">4.猎屠</a></li>
                     <li><a href="#">5.开心锤锤</a></li>
                     <li><a href="#">6.连环套</a></li>
                     <li><a href="#">7.仁心俱乐部</a></li>
                     <li><a href="#">8.熊出没只探险日记</a></li>
                     <li><a href="#">9.小猪佩奇全集</a></li>
                     <li><a href="#">10.战狼</a></li>
                 </ul>
             </div>
 
 
 
             <div class="左">
                 <ul>
                     <li><a href="#">总榜</a></li>
                     <li><a href="#">1.哪吒之魔童降世</a></li>
                     <li><a href="#">2.北上</a></li>
                     <li><a href="#">3.速度与激情10</a></li>
                     <li><a href="#">4.猎屠</a></li>
                     <li><a href="#">5.开心锤锤</a></li>
                     <li><a href="#">6.连环套</a></li>
                     <li><a href="#">7.仁心俱乐部</a></li>
                     <li><a href="#">8.熊出没只探险日记</a></li>
                     <li><a href="#">9.小猪佩奇全集</a></li>
                     <li><a href="#">10.战狼</a></li>
                 </ul>
             </div>
 
 
             <div class="右">
                 <ul>
                     <li><a href="#">电视</a></li>
                     <li><a href="#">1.哪吒之魔童降世</a></li>
                     <li><a href="#">2.北上</a></li>
                     <li><a href="#">3.速度与激情10</a></li>
                     <li><a href="#">4.猎屠</a></li>
                     <li><a href="#">5.开心锤锤</a></li>
                     <li><a href="#">6.连环套</a></li>
                     <li><a href="#">7.仁心俱乐部</a></li>
                     <li><a href="#">8.熊出没只探险日记</a></li>
                     <li><a href="#">9.小猪佩奇全集</a></li>
                     <li><a href="#">10.战狼</a></li>
                 </ul>
             </div>
 
 
             <div class="左">
                 <ul>
                     <li><a href="#">总榜</a></li>
                     <li><a href="#">1.哪吒之魔童降世</a></li>
                     <li><a href="#">2.北上</a></li>
                     <li><a href="#">3.速度与激情10</a></li>
                     <li><a href="#">4.猎屠</a></li>
                     <li><a href="#">5.开心锤锤</a></li>
                     <li><a href="#">6.连环套</a></li>
                     <li><a href="#">7.仁心俱乐部</a></li>
                     <li><a href="#">8.熊出没只探险日记</a></li>
                     <li><a href="#">9.小猪佩奇全集</a></li>
                     <li><a href="#">10.战狼</a></li>
                 </ul>
             </div>
 
 
             <div class="右">
                 <ul>
                     <li><a href="#">电视</a></li>
                     <li><a href="#">1.哪吒之魔童降世</a></li>
                     <li><a href="#">2.北上</a></li>
                     <li><a href="#">3.速度与激情10</a></li>
                     <li><a href="#">4.猎屠</a></li>
                     <li><a href="#">5.开心锤锤</a></li>
                     <li><a href="#">6.连环套</a></li>
                     <li><a href="#">7.仁心俱乐部</a></li>
                     <li><a href="#">8.熊出没只探险日记</a></li>
                     <li><a href="#">9.小猪佩奇全集</a></li>
                     <li><a href="#">10.战狼</a></li>
                 </ul>
             </div>
 
 
         </div>
     </main>
 
 
     <footer>
 
         <div class="左">
             <h1>360影视</h1>
             <p>
                 浙ICP证B2-20090064号信息网络传播视听节目许可证1109357号浙网文【2021】2435-098号违法和不良信息举报电话：举报邮箱：浙公网安备 33030202000714号域名备案号
                 浙B2-20090064-3工商营业执照Copyright © 360安全网址. All Rights Reserved
             </p>
         </div>
 
 
         <div class="中">
             <h3>服务</h3>
             <ul>
                 <li>意见反馈</li>
                 <li>官方微博</li>
                 <li>未成年人举报</li>
                 <li>网上有害信息举报</li>
                 <li>专区涉网络暴力有害信息举报专区</li>
             </ul>
         </div>
 
 
         <div class="右">
             <h3>关于</h3>
             <ul>
                 <li>关于我们</li>
                 <li>版权声明</li>
                 <li>服务协议</li>
             </ul>
         </div>
 
 
     </footer>
 </body>
 
 </html>